<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 非常有用 */
        /* 伪元素，表示 虚假 动态 创建的元素 */
        /* 为元素用双冒号::表示，IE8可以兼容但冒号 */
        /* ::before         成为匹配元素的  第一个子元素，必须设置content */
        /* ::before         成为匹配元素的最后一个子元素，必须设置content */
        /* ::selection      文档中被用户圈选高亮的部分*/
        /* ::first-letter   被选中的块级元素的第一个字*/
        /* ::first-line     被选中的块级元素的第一行字*/
        a::before{content:'★';}
        a::after{content:'♥';}
        div {
            width: 300px;
            height: 100px;
            border: 1px solid #000;
        }
        .box1::selection{background-color: pink; color: tomato;}
        .box2::first-letter{color: tomato;font-size: 60px;}
        .box3::first-line{color:yellowgreen}    
</style>
</head>

<body>
    <a href="">1111</a>
    <div class="box1">
        山豆根豆腐干撒旦发多少个受到广泛的中国成功的人谈话认识到回复v以后江西南昌举行在戏剧创作
    </div>
    <div class="box2">
        ui是否参加第四u有覅圣诞节
    </div>
    <div class="box3">
        ui是否参加第四u有覅圣诞节ui是否参加第四u有覅圣诞节ui是否参加第四u有覅圣诞节ui是否参加第四u有覅圣诞节ui是否参加第四u有覅圣诞节ui是否参加第四u有覅圣诞节
    </div>
</body>
</html>